<!DOCTYPE html>
<html class="bg-white" xmlns:th="http://www.thymeleaf.org">
<head th:include="include :: header"></head>
<link rel="stylesheet" th:href="@{/css/admin.css}" media="all" />
<link rel="stylesheet" th:href="@{/plugins/zTree/css/zTreeStyle/zTreeStyle.css}" media="all" />
<body>
<form id="userForm" lay-filter="userForm" class="layui-form model-form">
    <input name="userId" type="hidden"/> <!--用户序号-->
    <div class="layui-form-item">
        <label class="layui-form-label">登录名称</label>
        <div class="layui-input-block">
            <input name="loginName" placeholder="请输入登录名称" type="text" class="layui-input" maxlength="20"
                   lay-verify="required" required/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">部门名称</label>
        <div class="layui-input-block">
            <input name="deptId"  type="hidden" id="treeId"/>
            <input name="deptName" id="treeName" placeholder="" type="text" class="layui-input inputsur" maxlength="20"  readonly="readonly" lay-verify="required" required/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input name="userName" placeholder="请输入用户名" type="text" class="layui-input" lay-verify=""
                   required/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input name="password" placeholder="请输入密码" type="password" class="layui-input" lay-verify=""
                   required/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
            <input name="email" placeholder="请输入邮箱" type="text" class="layui-input" lay-verify=""
                   required/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">手机</label>
        <div class="layui-input-block">
            <input name="phonenumber" placeholder="请输入手机" type="text" class="layui-input" lay-verify=""
                   required/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <select name="sex" id="sex" lay-filter="sex"  th:with="type=${@dict.getType('sys_user_sex')}">
                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="radio" name="status" value="0" title="启用" checked/>
            <input type="radio" name="status" value="1" title="停用"/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">岗位</label>
        <div class="layui-input-block">
            <select name="postIds" xm-select="postIds" lay-verify="required">
                <option th:each="post,userStat:${posts}" th:value="${post.postId}" th:text="${post.postName}"></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">角色</label>
        <div class="layui-input-block">
            <select name="roleIds" xm-select="roleIds" lay-verify="required">
                <option th:each="role,userStat:${roles}" th:value="${role.roleId}" th:text="${role.roleName}"></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item text-right">
        <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        <button class="layui-btn" lay-filter="btnSubmit" lay-submit>保存</button>
    </div>
</form>

<!-- js部分 -->
<div th:include="include::footer"></div>
<script type="text/javascript" th:src="@{/plugins/zTree/js/jquery.ztree.all-3.5.min.js}"></script>
<script type="text/javascript" th:src="@{/js/common.js}"></script>
<script>
    layui.use(['layer', 'form','formSelects','admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var formSelects = layui.formSelects;
        var admin = layui.admin;
        var url = ctx+"system/user/add";
        // 回显数据
        var user = admin.getTempData('t_user');
        console.log("userInfo:"+user);

        if(user){
            form.val('userForm', user);
            url = ctx+"system/user/edit";
            $('input[name="loginName"]').attr('readonly', 'readonly');

            var rds = new Array();
            var pds = new Array();
            for (var i = 0; i < user.roles.length; i++) {
                rds.push(user.roles[i].roleId);
            }
            formSelects.value('roleIds', rds);   //用户的角色信息

            for (var i = 0; i < user.posts.length; i++) {
                pds.push(user.posts[i].postId);
            }
            formSelects.value('postIds', pds);   //用户的岗位信息
        }

        // 表单提交事件
        form.on('submit(btnSubmit)', function (data) {
            layer.load(2);
            console.log(url);
            $.post(url, data.field, function (data) {
                layer.closeAll('loading');
                if (data.code == 0) {
                    top.layer.msg(data.msg, {icon: 1});
                    admin.putTempData('formOk', true);  // 操作成功刷新表格
                    // 关闭当前iframe弹出层
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                } else {
                    top.layer.msg(data.msg, {icon: 2});
                }
            });
            return false;
        });

        //选择部门
        $("input[name='deptName']").click(function () {
            showSelectTree();
        });

        //跳转到部门树页面
        function showSelectTree() {
            var treeId = $("#treeId").val();
            var deptId;
            if (treeId == null || treeId.trim() == "") {
                deptId = 100;
            }
            else {
                deptId = treeId;
            }
            var url = ctx + "system/dept/selectDeptTree/" + deptId;
            layer.open({
                type: 2,
                title: '部门选择',
                area: ['380px', '455px'],
                content: url,
                btn: ['确定','关闭'],
                yes: function (index, layero) {
                    var tree = layero.find("iframe")[0].contentWindow.$._tree;
                    if ($.tree.notAllowParents(tree)) {
                        var body = layer.getChildFrame('body', index);
                        $("#treeId").val(body.find('#treeId').val());
                        $("#treeName").val(body.find('#treeName').val());
                        layer.close(index);
                    }
                }, cancel: function () {
                    return true;
                }
            });
        }

        //不允许选择父节点
/*        function notAllowParents(_tree){
            var nodes = _tree.getSelectedNodes();
            for (var i = 0; i < nodes.length; i++) {
                if (nodes[i].level == 0) {
                    top.layer.msg("不能选择根节点（" + nodes[i].name + "）", {icon: 2});
                    return false;
                }
                if (nodes[i].isParent) {
                    top.layer.msg("不能选择父节点（" + nodes[i].name + "）", {icon: 2});
                    return false;
                }
            }
            return true;
        }*/

    });
</script>
</body>
</html>